<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport" />
    <meta content="telephone=no" name="format-detection" />
    <title>选择服务</title>
    <link href="/css/main.css" rel="stylesheet" type="text/css">
    <link href="/css/style.css" rel="stylesheet" type="text/css">
    <link href="/css/shake.css" rel="stylesheet" type="text/css">
    <link href="/css/font-awesome.min.css" rel="stylesheet" type="text/css">
    <link href="/css/animate.min.css" rel="stylesheet" type="text/css">
    <script type="text/javascript" src="/js/jquery-1.8.3.min.js"></script>
    <script type="text/javascript" src="/js/wo.js"></script>
</head>
<body>
<div class="warpe">
    <div class="head">
        <a href="/server/menu" class="return"><i class="icon-chevron-left"></i> 返回</a>
        选择服务
        <a href="Interest_user.html" class="search"><i class="icon-reorder"></i> </a>
    </div>
    <div class="M_t">
        <img th:src="${lists[0].serverImg}">
        <p>[[${lists[0].serverName}]]</p>
    </div>

    <div class="I_div">
        <div class="inter_add" th:each="s:${lists}">
            <ul>
                <li class="animated bounceInLeft">
                    <a th:href="${'/server/detail?mid='+s.supplierId+'&typeId='+s.serverType+'&id='+s.id}">
                        <span class="puff_left">[[${s.vendorName}]]</span>
                        <span class="puff_right">使用人数:<span>[[${s.serverNum}]]</span></span>
                    </a>
                </li>
                <li class="animated bounceInLeft">
                    <span class="puff_left">费用：</span>
                    <span class="puff_right"><span style="color: red">[[${s.price}]]</span>元/次</span>
                </li>
            </ul>
        </div>
    </div>



</div>
<div class="navside">
    <ul>
        <li class="margin_left animated bounceInLeft">
            <a href="index.html">
                <p><i class="icon-home"></i> </p>
                <span>首页</span>
            </a>
        </li>
        <li class="animated bounceInRight">
            <a href="smart_index.html">
                <p><i class="icon-globe"></i> </p>
                <span>智能中心</span>
            </a>
        </li>
        <li class="animated bounceInLeft">
            <a href="#" class="navside_hover">
                <p><i class="icon-star-empty"></i> </p>
                <span>服务中心</span>
            </a>
        </li>
        <li class="animated bounceInRight">
            <a href="community.html">
                <p><i class="icon-columns"></i> </p>
                <span>社区互动</span>
            </a>
        </li>
        <li class="animated bounceInLeft">
            <a href="Information_index.html">
                <p><i class="  icon-th-large"></i> </p>
                <span>信息中心</span>
            </a>
        </li>
    </ul>
</div>
<script type="text/javascript" src="/js/slide_wap.js"></script>
<script type="text/javascript" src="/js/common.js"></script>
</body>
</html>